<template>
  <div class="projectinfo">
    <!-- 项目评论页面 -->
    <div class="infobox">
      <div
        class="infocontent"
        v-for="(item, index) in commentList"
        :key="index"
        :class="item.parentId ? 'childreninfo' : ''"
      >
        <div class="touxiang">
          <img :src="item.userUrl" alt="" />
        </div>
        <div class="allinfo">
          <span v-if="item.parentId"
            >{{ item.userName }}回复了{{ item.parentUserName }}[{{
              index
            }}楼]的评论</span
          >
          <span v-else>{{ item.userName }}评论了项目</span>
          <span>{{ item.createTime }}</span>
          <span>[{{ index + 1 }}楼]</span>
          <span
            class="deleteIcon"
            v-if="userId === item.createdId"
            @click="deleteComment(item.id)"
            ><i class="el-icon-delete"></i
          ></span>
          <span
            class="roundIcon"
            v-else
            @click="roundComment({ id: item.id, name: item.parentUserName })"
            ><i class="el-icon-chat-line-round"></i
          ></span>
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>
    <p v-if="addCommentList.parentid">回复{{ roundName }}的评论</p>
    <div class="inputinfo">
      <textarea
        type="text"
        v-model="addCommentList.name"
        placeholder="请输入发送的信息"
      ></textarea>
      <button @click="sendOutComment">发送</button>
    </div>
  </div>
</template>

<script>
import { addComment, deleteComment } from '@/api/task/task.js';
export default {
  name: 'project-info',
  props: {
    commentList: {
      type: [Object, Array]
    },
    commentUserId: {
      type: [Number, String]
    }
  },
  computed: {
    activeItemList: function () {
      return this.item.children.filter((item) => {
        return item.isActive;
      });
    }
  },
  created() {
  },
  data() {
    return {
      userId: parseInt(sessionStorage.getItem('userid')), // 用户id
      selectTaskSummaryList: {},
      addCommentList: {
        businessid: parseInt(localStorage.getItem('projectId')), // 业务id-当前任务id
        createdid: parseInt(sessionStorage.getItem('userid')), // 创建人id
        name: '', // 内容
        parentid: null, // 父级id-被回复人id
        type: 1, // 属性-1-项目  2-任务
        userId: parseInt(this.commentUserId) // 任务userid
      },
      roundName: '' // 被回复人名字
    };
  },
  methods: {
    // 删除评论
    deleteComment(id) {
      this.$confirm('确定要删除该数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await deleteComment({ id: parseInt(id) });
        // console.log(res);
        if (res.code === 200) {
          // this.$message.success('删除成功');
          this.$message({
            showClose: true,
            message: '删除成功',
            type: 'success'
          });
          // 刷新列表
          this.$router.go(0);
        } else {
          // this.$message.error('删除失败');
          this.$message({
            showClose: true,
            message: '删除失败',
            type: 'error'
          });
        }
      }).catch((err) => {
        console.log(err);
      });
    },
    // 回复评论
    roundComment(data) {
      this.addCommentList.parentid = data.id;
      this.roundName = data.name;
    },
    // 发送评论
    async sendOutComment() {
      // console.log(this.addCommentList);
      if (this.addCommentList.name === '') {
        this.$message({
          showClose: true,
          message: '评论内容不能为空！',
          type: 'warning'
        });
        // return this.$message.warning('评论内容不能为空！');
      }
      const res = await addComment(this.addCommentList);
      // console.log(res);
      if (res.code === 200) {
        // 提示成功
        // this.$message.success('评论成功');
        this.$message({
          showClose: true,
          message: '评论成功',
          type: 'success'
        });
        // 刷新列表
        this.$router.go(0);
      } else {
        // 提示失败
        // this.$message.error('评论失败,请稍后重试！');
        this.$message({
          showClose: true,
          message: '评论失败,请稍后重试！',
          type: 'error'
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.projectinfo {
  text-align: left;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  .infobox {
    // width: 100%;
    height: 350px;
    overflow-y: auto;
    box-sizing: border-box;
    margin-left: 20px;
    .infocontent {
      display: flex;
      position: relative;
      margin-top: 10px;
      .touxiang {
        margin-right: 20px;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 45px;
          height: 45px;
          border-radius: 50%;
          box-shadow: 1px 1px 3px #888888;
        }
      }
      .allinfo {
        span {
          color: #555;
          font-size: 14px;
          display: inline-block;
          margin: 0 10px;
          margin-top: 5px;
        }
        .deleteIcon,
        .roundIcon {
          cursor: pointer;
          display: inline-block;
          width: 28px;
          height: 28px;
          text-align: center;
          line-height: 28px;
          border-radius: 14px;
          background-color: #e8f8fb;
          i {
            font-size: 16px;
            color: #66d0e8;
          }
        }
        p {
          color: #111;
          font-size: 14px;
          margin: 0 10px;
          margin-top: 5px;
        }
      }
    }
    .childreninfo {
      display: flex;
      position: relative;
      margin-left: 100px;
      margin-top: 20px;
      .touxiang {
        margin-right: 20px;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 45px;
          height: 45px;
        }
      }
      .allinfo {
        span {
          color: #555;
          font-size: 14px;
          display: inline-block;
          margin: 0 10px;
          margin-top: 5px;
        }
        p {
          color: #111;
          font-size: 14px;
          margin: 0 10px;
          margin-top: 5px;
        }
      }
    }
  }
  p {
    font-size: 14px;
  }
  .inputinfo {
    margin-top: 20px;
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    position: relative;
    color: #555;
    textarea {
      width: calc(85% - 40px);
      height: calc(100% - 40px);
      border: 1px solid #dae1fd;
      outline: none;
      padding: 20px;
      resize: none;
    }
    textarea:focus {
      box-shadow: inset 0px 1px 4px 0px #2fc0e0, inset 0px -1px 4px 0px #2fc0e0,
        inset 1px 0px 4px 0px #2fc0e0, inset -1px 0px 4px 0px #2fc0e0;
    }
    button {
      width: 10%;
      height: 100%;
      color: white;
      background: #6c59cd;
      border-radius: 8px;
      cursor: pointer;
    }
    // .upfile {
    //   position: absolute;
    //   bottom: -30px;
    //   display: flex;
    //   div {
    //     cursor: pointer;
    //   }
    //   img {
    //     width: 15px;
    //     cursor: pointer;
    //     vertical-align: bottom;
    //   }
    // }
  }
}
</style>
